<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
    <style>
        #demo-quickStart {
            height: 600px;
            width: 600px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div id="demo-quickStart"></div>
<div style="color: red">
    <i>❤</i>
    <i>❤</i>
    <i>❤</i>
</div>
</body>
<script>
    const {Scene, Sprite} = spritejs;

    const scene = new Scene('#demo-quickStart', {
        viewport: ['auto', 'auto'],
        resolution: [600, 600],
    });

    const layer = scene.layer();

    const tank = new Sprite('./imgs/tank.gif');
    const enemy = new Sprite('./imgs/enemy.gif');
    const fly = new Sprite({
        size:[20, 20],
        bgcolor: 'red',
        borderRadius: '10',
        anchor: 0.5
    });

    const fly_enemy = new Sprite({
        size:[20, 20],
        bgcolor: 'blue',
        borderRadius: '10',
        anchor: 0.5
    });

    tank.attr({
        anchor: [0.5, 0.5],
        pos: [270, 540]
    });
    enemy.attr({
       anchor:0.5,
       pos: [100, 100]
    });
    layer.append(tank, enemy);

    var last_keyCode = 38;
    var move = false;
    var moving;
    var fly_move = false;
    var fly_moving;

    var fly_move_enemy = false;
    var fly_moving_enemy;

    var enemyAppendFly;

    layer.on('keydown', function (ev) {
        if (ev.keyCode > 36 && ev.keyCode < 41) {
            move = true;
            if (!moving) {
                moving = moveTank(tank, ev.keyCode);
            }
        }

        if (ev.keyCode === 32) {
            fly_move = true;
            if (!fly_moving) {
                fly.attributes.pos = tank.attributes.pos;
                layer.append(fly);
                fly_moving = moveFly(tank, last_keyCode);
            }

        }
    });

    layer.on('keyup', function (ev) {
        move = false;
    });

    // enemy.on('update', ({target, context}) => {
    //
    //     if (!enemyAppendFly) {
    //
    //     }
    //     // moveFly_Enemy(target, target.attributes.rotate);
    //     // }
    // });
    //
    //
    // function sendF(){
    //     fly_move_enemy = true;
    //     if (!enemyAppendFly) {
    //         fly_enemy.attributes.pos = enemy.attributes.pos;
    //         setInterval(moveFly_Enemy(enemy, enemy.attributes.rotate), 3000);
    //     }
    // }


    document.documentElement.addEventListener('keydown', (evt) => {
        layer.dispatchEvent('keydown', evt, true, true);
    });

    document.documentElement.addEventListener('keyup', (evt) => {
        layer.dispatchEvent('keyup', evt, true, true);
    });

    async function moveFly(tank, forwardCode) {
        var x = tank.attributes.x;
        var y = tank.attributes.y;
        var speed = 20;
        while (fly_move) {
            switch(forwardCode) {
                case 38: //up
                    y = y - speed;
                    fly_move = y > 0;
                    break;
                case 40: //down
                    y = y + speed;
                    fly_move = y < 600;
                    break;
                case 39: //right
                    x = x + speed;
                    fly_move = x < 600;
                    break;
                case 37: //left
                    x = x - speed;
                    fly_move = x > 0;
                    break;
                default:
                    break;
            }
            const fly_anim = fly.animate([{
                x: x,
                y: y
            }], {
                duration: 30,
                fill: 'forwards'
            });
            await fly_anim.finished;
            if (enemy.parentNode && enemy.OBBCollision(fly)) {
                fly_move = false;
                enemy.remove();

                setTimeout(createEnemy(layer, enemy, tank), 2000);
            }
        }
        fly_moving = null;
        fly.remove();
    }



    async function moveFly_Enemy(enemy, rotate) {
        layer.append(fly_enemy);
        var x = enemy.attributes.x;
        var y = enemy.attributes.y;
        var speed = 20;
        while (fly_move_enemy) {
            switch(rotate) {
                case 180: //up
                    y = y - speed;
                    break;
                case 0: //down
                    y = y + speed;
                    break;
                case 90: //right
                    x = x + speed;
                    break;
                case 270: //left
                    x = x - speed;
                    break;
                default:
                    break;
            }
            const fly_anim_enemy = fly_enemy.animate([{
                x: x,
                y: y
            }], {
                duration: 30,
                fill: 'forwards'
            });
            await fly_anim_enemy.finished;
            // if (enemy.parentNode && enemy.OBBCollision(fly)) {
            //     fly_move = false;
            //     enemy.remove();
            //
            //     setTimeout(createEnemy(layer, enemy, enemy), 2000);
            // }
        }
        fly_moving_enemy = null;
        fly_enemy.remove();
    }


    async function moveTank(tank, keyCode) {
        while (move) {
            var x = tank.attributes.x;
            var y = tank.attributes.y;
            var temp = 0;
            if ((last_keyCode - keyCode) === 3) {
                temp = 90;
            } else if ((last_keyCode - keyCode) === -3) {
                temp = -90;
            } else if (last_keyCode - keyCode === 2) {
                temp = 180
            } else if (last_keyCode - keyCode === -2) {
                temp = -180
            } else if (last_keyCode - keyCode === 1) {
                temp = -90
            } else if (last_keyCode - keyCode === -1) {
                temp = 90
            }
            var rotate = tank.attributes.rotate + temp;

            switch(keyCode) {
                case 38: //up
                    y = y - 30 > 30? y -30: 30;
                    break;
                case 40: //down
                    y = y + 30 < 570? y + 30: 570;
                    break;
                case 39: //right
                    x = x + 30 < 570? x + 30: 570;
                    break;
                case 37: //left
                    x = x - 30 > 30? x -30: 30;
                    break;
                default:
                    break;
            }

            const anim = tank.animate([{
                x: tank.attributes.x,
                y: tank.attributes.y
            },{
                x: x,
                y: y,
                rotate: rotate
            }], {
                duration: 100,
                fill: 'forwards'
            });
            last_keyCode = keyCode;
            await anim.finished;
        }

        moving = null;

    }

    function createEnemy(layer, ememy, tank) {
        ememy.attributes.x = RandomNumBoth(100, 600);
        ememy.attributes.y = RandomNumBoth(100, 600);
        ememy.attributes.rotate = RandomNumBoth(0, 3) * 90;
        layer.append(ememy);
    }

    function RandomNumBoth(Min,Max){
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range); //四舍五入
        return num;
    }

</script>
</html>
